<!DOCTYPE html>
<html>

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ccms.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
<!-- //! 60秒刷新一下 -->
<!-- <meta http-equiv="refresh" content="60"> -->
</head>

<body>
    <div id="app">
        <div class="ROW_1">
            <div class="Emission">
                <div class="EmissionData">
                    <div class="EmissionData_1">
                        <div class="EmissionData_1_1" style="font-weight: 900; font-size: 125%;">
                            全厂排放数据
                        </div>
                        <div class="EmissionData_1_1">
                            截止至 2024/08/08 12:00
                        </div>
                    </div>
                    <div class="EmissionData_2">
                        <div class="EmissionData_2_1">
                            <div class="EmissionData_2_1_1">
                                <div class="EmissionData_2_1_2">
                                    <div class="EmissionData_2_1_3">
                                        92%
                                    </div>
                                    <div class="EmissionData_2_1_4">
                                        化石燃料燃烧占比
                                    </div>
                                </div>
                            </div>
                            <div class="EmissionData_2_1_1">
                                <div class="EmissionData_2_1_2">
                                    <div class="EmissionData_2_1_3">
                                        6%
                                    </div>
                                    <div class="EmissionData_2_1_4">
                                        工业生产过程占比
                                    </div>
                                </div>
                            </div>
                            <div class="EmissionData_2_1_1">
                                <div class="EmissionData_2_1_2">
                                    <div class="EmissionData_2_1_3">
                                        2%
                                    </div>
                                    <div class="EmissionData_2_1_4">
                                        使用电力占比
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Figure">
                    <div class="Figure_1">
                        <div id="GTreli" class="Figure_2"></div>
                    </div>
                    <div class="Figure_1">
                        <div id="QCpaifang" class="Figure_2"></div>
                    </div>
                </div>

            </div>
            <div class="Calendar">
                <div class="grid-content">
                    <div class="GridContent">
                        <div class="calendar_1">
                            <div class="weekBox">
                                <div class="button">
                                    <div id="month-year" style="font-weight: 700;font-size: 140%;"></div>
                                    <button id="prevWeek" class="buttonNext">&lt;</button>
                                    <button id="nextWeek" class="buttonNext">&gt;</button>
                                </div>
                                <table id="calendar">
                                    <thead>
                                        <tr>
                                            <th>一</th>
                                            <th>二</th>
                                            <th>三</th>
                                            <th>四</th>
                                            <th>五</th>
                                            <th>六</th>
                                            <th>日</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 日历内容将通过JavaScript动态生成 -->
                                    </tbody>
                                </table>
                                <!-- 弹窗结构 -->
                                <div id="modal" class="modal-overlay">
                                    <div class="modal-content">
                                        <div class="datePop">
                                            <div class="buttonB">
                                                <button id="prev-month" class="buttonNext buttonMonth">上个月</button>
                                                <span id="month-yearB"></span>
                                                <button id="next-month" class="buttonNext buttonMonth">下个月</button>
                                            </div>
                                            <div id="calendarB" class="dateMonth"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="GridContent_1">
                        <div id="PFqiangdu" class="PFqiangdu_1"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ROW_2">

            <div class="CarbonFootprint">
                <div class="CarbonFootprintTitle">碳足迹产品</div>
                <div class="CarbonFootprintTitle1 CarbonFootprintTitleActive" onclick="switchData(this,0)"><img
                        src="./img/CarbonProducts (4).png" alt="" style="width: 30px;
          height: 30px;">&ensp;碳产品一</div>
                <div class="CarbonFootprintTitle1" onclick="switchData(this,1)"><img src="./img/CarbonProducts (3).png"
                        alt="" style="width: 30px;
          height: 30px;">&ensp;碳产品二</div>
                <div class="CarbonFootprintTitle1" onclick="switchData(this,2)"><img src="./img/CarbonProducts (2).png"
                        alt="" style="width: 30px;
          height: 30px;">&ensp;碳产品三</div>
                <div class="CarbonFootprintTitle1" onclick="switchData(this,3)"><img src="./img/CarbonProducts.png"
                        alt="" style="width: 30px;
          height: 30px;">&ensp;碳产品四</div>
                <div class="CarbonFootprintTitle1" onclick="switchData(this,4)"><img src="./img/CarbonProducts (5).png"
                        alt="" style="width: 30px;
          height: 30px;">&ensp;碳产品五</div>
            </div>  

          <div class="ROW_2_box">
            <div class="EmissionTrend" style="    width: 53.8%;
    height: 103%; margin-top: 2%; margin-left: 1%;">

                <div id="containerOne" style="width: 100%; height: 100%"></div>
            </div>
            <div class="EmissionTrend" style="width: 53.8%;
    height: 103%; margin-top: 2%;">

                <div id="containerOneTwo" style="width: 100%; height: 100%"></div>
            </div>
          </div> 
        </div>
        <div class="ROW_3">
            <div class="QuickAccess">
                <div
                    style="font-size: 125%;;color:rgba(70, 78, 95, 1);;width: 100%;height: 20%; padding: 1% 2%;box-sizing: border-box;font-weight: 900;">
                    快捷入口
                </div>
                <div
                    style="width: 100%;height: 80%;display: flex;flex-wrap: wrap;align-items: center;justify-content:flex-start;">
                    <div class="QuickAccess_1" style="background: #F7FBFD;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/BBBF.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            CBAM报表备份
                        </div>

                    </div>
                    <div class="QuickAccess_1" style="background: #F7F7FD;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/ZNTZCGL.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            智能碳资产管理平台
                        </div>
                    </div>
                    <div class="QuickAccess_1" style="background: #FFFBF0;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/ZCFGK.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            政策法规库
                        </div>
                    </div>
                    <div class="QuickAccess_1" style="background: #F3F9FD;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/LCABG.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            大类产品LCA结果
                        </div>
                    </div>
                    <div class="QuickAccess_1" style="background: #F5F8FF;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/MXCP.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            明细产品LCI结果
                        </div>
                    </div>
                    <div class="QuickAccess_1" style="background: #F6F6FF;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/LCABG.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            LCA报告
                        </div>
                    </div>
                    <div class="QuickAccess_1" style="background: #FFF9F7;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/QYCJPF.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            企业层级排放
                        </div>
                    </div>
                    <div class="QuickAccess_1" style="background: #F7FAF7;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/GXCJPF.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            工序层级排放
                        </div>
                    </div>
                    <div class="QuickAccess_1" style="background: #F7F8FA;
border-radius: 8px;">
                        <div style="width: 20%;padding-top: 2%;">
                            <img src="./img/FCCJPF.png" alt="" style="width: 100%;">
                        </div>
                        <div style="width: 80%;">
                            分厂层级排放
                        </div>
                    </div>

                </div>
            </div>
            <div class="Policy">
                <div
                style="font-size: 125%;;color:rgba(70, 78, 95, 1);;width: 100%;height: 20%; padding: 1% 2%;box-sizing: border-box;font-weight: 900;">
                政策法规库
            </div>
                <div class="ZhengCe">
                    <div style="width: 100%;">
                        <div style="display: flex;justify-content: space-around;height: 25%;align-items: center; width: 100%;">
                            <span class="CONter">政策</span>
                            <span style="width: 65%; overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;">此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称</span>
                            <span id="Time" style="width: 18%;overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;"></span>
                        </div>
                        <div style="display: flex;justify-content: space-around;height: 25%;align-items: center;">
                            <span class="CONter">法规</span>
                            <span style="width: 65%; overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;">此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称</span>
                            <span id="Time1" style="width: 18%;overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;"></span>
                        </div>
                        <div style="display: flex;justify-content: space-around;height: 25%;align-items: center;">
                            <span class="CONter">标准</span>
                            <span style="width: 65%; overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;">此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称</span>
                            <span id="Time2" style="width: 18%;overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;"></span>
                        </div>
                        <div style="display: flex;justify-content: space-around;height: 25%;align-items: center;">
                            <span class="CONter">其他</span>
                            <span style="width: 65%; overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;">此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称此处展示标题名称</span>
                            <span id="Time3" style="width: 18%;overflow: hidden;
                        white-space: nowrap; 
                        text-overflow: ellipsis;"></span>
                        </div>

                        <!-- <div id="LoveID">

                    </div> -->
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="ccms.js"></script>
</body>

</html>